<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/lib/bulma-v0.6.2/css/bulma.css" />
		<link rel="stylesheet" type="text/css" href="../bulma/css/bulma-docs.css" />

		<script src="../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/lib/vue-v2.5.13/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				font-family: Menlo, Consolas, monospace;
				color: #444;
			}
			
			.item {
				cursor: pointer;
			}
			
			.bold {
				font-weight: bold;
			}
			
			ul {
				padding-left: 1em;
				line-height: 1.5em;
				list-style-type: dot;
			}
		</style>
	</head>

	<body>
		<!-- item template -->
		<script type="text/x-template" id="tree-item-template">
			<li class="tree-branch">
				<div :class="{bold: isFolder}"  @dblclick="changeType" style="user-select: none;">
					<span v-if="isFolder" @click="toggle">[{{open ? '-' : '+'}}]</span>
					{{model.title}}
					<button class="btn btn-default btn-open" @click="openDesc">open</button>
				</div>
				<ul v-show="open" v-if="isFolder">
					<tree-item class="item" v-for="model in model.childrens" :model="model"></tree-item>
					<!--<li class="add" @click="addChild">+</li>-->
				</ul>
			</li>
		</script>

		<section class="hero is-primary" id="header">
			<div class="hero-body">
				<div class="container">
					<h1 class="title">{{title}}</h1>
					<h2 class="subtitle">
						<span>作者:{{author}}</span>
						<span>邮箱:<a v-bind:href="'mailto:'+email" >{{email}}</a></span>
					</h2>
				</div>
			</div>
		</section>

		<section class="section">
			<div class="container is-fluid" id="demo-container">
				<ul>
					<tree-item class="item" :model="treeData"></tree-item>
				</ul>
			</div>
		</section>
		<script type="text/javascript">
			const get = (url) => new Promise((resolve, reject) => {
				let xhr = new XMLHttpRequest();
				xhr.open('GET', url, true);
				xhr.setRequestHeader('Content-Type', 'application/json');
				xhr.send();
				xhr.onload = () => resolve(JSON.parse(xhr.responseText));
				xhr.onerror = error => reject(error);
			});
			//define the dialog component
			Vue.component('add-item',{
				
			});
			// define the item component
			Vue.component('tree-item', {
				template: '#tree-item-template',
				props: {
					model: Object
				},
				data() {
					return {
						open: false
					}
				},
				computed: {
					isFolder() {
						return this.model.childrens &&
							this.model.childrens.length
					}
				},
				methods: {
					toggle() {
						if(this.isFolder) {
							this.open = !this.open
						}
					},
					changeType() {
						return;
						if(!this.isFolder) {
							Vue.set(this.model, 'childrens', [])
							this.addChild()
							this.open = true
						}
					},
					addChild() {
						this.model.childrens.push({
							name: 'new stuff'
						})
					},
					openDesc(){
						debugger;
					}
				}
			});
			let header, content;
			const initHeader = data => {
				let header = new Vue({
					el: '#header',
					data: {
						title: 'empty',
						author: 'empty',
						email: 'empty'
					}
				})
				header.title = data.title;
				header.author = data.author;
				header.email = data.email;
				return header;
			}
			const initContent = data => {
				let content = new Vue({
					el: '#demo-container',
					data: {
						treeData: data
					}
				})
				return content;
			}

			//enterance
			window.onload = e => {
				get('list.json').then(data => {
					debugger;
					header = initHeader(data);
					content = initContent(data);
				})
			}
		</script>
	</body>

</html>